<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-row>
        <el-col :span="21">
          <i class="el-icon-search"></i>
          <span class="search-title">筛选搜索</span>
        </el-col>
        <el-col :span="3" style="display: flex;justify-content: end">
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
      <el-form :model="body" ref="queryForm" :inline="true" size="small" label-width="140px">
        <el-form-item label="姓名:" prop="name">
          <el-input v-model="body.name" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话:" prop="phone">
          <el-input v-model="body.phone" placeholder="请输入电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="审核时间:">
          <el-date-picker v-model="selectedAuditTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="changeAuditTime" @clear="clearAuditTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-date-picker v-model="selectedCreateTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="changeCreateTime" @clear="clearCreateTime">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <i class="el-icon-tickets"></i>
      <span style="padding-left: 6px;">数据列表</span>
    </el-card>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="序号" v-slot="{ $index }" fixed="left" align="center">
        {{ getSerialNumber($index) }}
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="电话" align="center" width="106">
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号" align="center" width="120">
      </el-table-column>
      <el-table-column prop="idCardFrontImage" label="身份证正面图" align="center" width="120">
        <template #default="scope">
          <img class="img-style" :src="scope.row.idCardFrontImage" alt="Image" />
        </template>
      </el-table-column>
      <el-table-column prop="idCardReverseImage" label="身份证反面图" align="center" width="120">
        <template #default="scope">
          <img class="img-style" :src="scope.row.idCardReverseImage" alt="Image" />
        </template>
      </el-table-column>
      <el-table-column prop="community" label="小区" align="center" width="90">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center" width="110">
      </el-table-column>
      <el-table-column prop="auditStatus" label="审核状态" align="center">
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间" align="center">
      </el-table-column>
      <el-table-column prop="auditRemark" label="审核备注" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" align="center">
      </el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleReview(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pagination v-show="true" @pagination="handlePagination" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" />
    <!-- 审核详情对话框 -->
    <review-dialog title="注册详情" :dialogVisible="detailVisible" :reviewInfo="reviewInfo"
      @close="handleDialogClose"></review-dialog>
    <!-- 审核对话框 -->
    <review-dialog title="审核" :dialogVisible="reviewVisible" :reviewInfo="reviewInfo"
      @close="handleDialogClose"></review-dialog>
  </div>
</template>
<script>
import ReviewDialog from "@/components/ReviewDialog/index"
import { getAuditListApi } from "@/api/orderreview/reviewlist"
import { getReviewStatus, getReviewStatusItem } from "@/utils/transform/transform"
import { updateAuditApi, getAuditDetailApi } from "@/api/orderreview/reviewlist"
import { calcMixin } from "@/utils/mixins/calcMixin"

export default {
  name: "ReviewList",
  components: { ReviewDialog },
  mixins: [calcMixin],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      body: {
        name: "",
        phone: "",
        auditStatus: "",
        auditStartTime: "",  //审核开始时间
        auditEndTime: "",    //审核结束时间
        createStartTime: "",  //创建开始时间
        createEndTime: "",   //创建结束时间
        reviewTime: ""
      },
      tableData: [],
      total: 0,
      detailVisible: false,
      reviewVisible: false,
      reviewInfo: {},
      selectedAuditTime: [],
      selectedCreateTime: []
    }
  },
  methods: {
    // 审核列表
    async getAuditList() {
      const res = await getAuditListApi(this.queryParams, this.requestBody)
      if (res.code === 200) {
        this.tableData = getReviewStatus(res.rows)
        this.total = res.total
      }
      console.log('审核列表', res)
    },
    // 查询审核详情
    async getAuditDetail(id) {
      const res = await getAuditDetailApi(id)
      if (res.code === 200) {
        this.reviewInfo = getReviewStatusItem(res.data)
      }
      console.log(this.reviewInfo)
    },
    // 进行审核
    async updateAudit(obj) {
      const res = await updateAuditApi(obj)
      console.log('进行审核', res)
    },
    // 点击查看按钮
    handleView(row) {
      this.detailVisible = true
      this.getAuditDetail(row.id)
    },
    // 点击审核按钮
    handleReview(row) {
      if (row.auditStatus === '审核成功' || row.auditStatus === '审核失败') {
        this.$message.warning('该单已审核')
        return
      }
      this.reviewVisible = true
      this.getAuditDetail(row.id)
    },
    // 切换分页操作
    handlePagination({ page, limit }) {
      this.queryParams = {
        ...this.queryParams,
        pageNum: page,
        pageSize: limit
      }
      this.getAuditList()
    },
    // 点击查询按钮
    handleQuery() {
      this.getAuditList()
    },
    // 点击重置按钮
    resetQuery() {
      this.resetForm("queryForm")
      this.clearAuditTime()
      this.clearCreateTime()
      this.getAuditList()
    },
    handleDialogClose(data) {
      Object.assign(this, {
        detailVisible: data.dialogVisible,
        reviewVisible: data.dialogVisible,
        reviewInfo: data.reviewInfo
      });
      this.getAuditList()
    },

    changeCreateTime() {
      if (Array.isArray(this.selectedCreateTime) && this.selectedCreateTime.length === 2) {
        const [createStartTime, createEndTime] = this.selectedCreateTime;
        this.body = {
          ...this.body,
          createStartTime,
          createEndTime
        };
      } else {
        this.body = {
          ...this.body,
          createStartTime: "",
          createEndTime: ""
        };
      }
    },

    clearCreateTime() {
      this.selectedCreateTime = [];
      this.changeCreateTime();
    },
    changeAuditTime() {
      if (Array.isArray(this.selectedAuditTime) && this.selectedAuditTime.length === 2) {
        const [AuditStartTime, AuditEndTime] = this.selectedAuditTime;
        this.body = {
          ...this.body,
          AuditStartTime,
          AuditEndTime
        };
      } else {
        this.body = {
          ...this.body,
          AuditStartTime: "",
          AuditEndTime: ""
        };
      }
    },
    clearAuditTime() {
      this.selectedAuditTime = []
      this.changeAuditTime()
    }
  },
  mounted() {
    this.getAuditList()
  },
}
</script>
<style lang="scss" scoped>
.img-style {
  width: 100px;
  height: 60px;
}
</style>